<template>
  <div>
    <Card>
      <tables ref="tables" editable searchable search-place="top" v-model="tableData" :columns="columns" />
      <Button style="margin: 10px 0;" type="primary" @click="exportExcel">导出为excel文件</Button>
      <Button style="position:absolute; top: 27px; right: 17px;" type="primary" @click="addCommodityType">新增商品类型</Button>
    </Card>
    <Modal v-model="visible" :title="title" :mask-closable="false" @on-ok="okModal" @on-cancel="cancelModal">
      <Row class="row" style="margin-top:0;">
        <Col span="6">
        <strong class="title">商品类型：</strong>
        </Col>
        <Col span="18">
        <Input v-model="commodityType" placeholder="请输入商品类型" class="form" />
        </Col>
      </Row>
      <Row class="row">
        <Col span="6">
        <strong class="title">商品描述：</strong>
        </Col>
        <Col span="18">
        <Input v-model="commodityDescribe" placeholder="请输入商品描述" class="form" />
        </Col>
      </Row>
      <Row class="row">
        <Col span="6">
        <strong class="title">管理员：</strong>
        </Col>
        <Col span="18">
        <Select v-model="administrator" placeholder="请选择管理员" class="form">
          <Option v-for="item in userList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        </Col>
      </Row>
    </Modal>
    <Modal v-model="deleteVisible" @on-ok="handleDelete">
      <p>是否确定删除该条记录？</p>
    </Modal>
  </div>
</template>

<script>
import Tables from '_c/tables'
import rcRequest from 'rc-request'
import jsCookie from 'js-cookie'

export default {
  name: 'commodity_type_page',
  components: {
    Tables
  },
  data() {
    return {
      columns: [
        { title: '商品类型', key: 'commodityType' },
        { title: '描述', key: 'commodityDescribe' },
        { title: '管理员', key: 'administrator' },
        { title: '更新时间', key: 'updateTime' },
        {
          title: '操作',
          key: 'action',
          width: 140,
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'info',
                  size: 'small',
                  ghost: true,
                },
                on: {
                  click: () => {
                    this.title = '修改商品类型';
                    this.visible = true;
                    this.commodityType = params.row.commodityType;
                    this.commodityDescribe = params.row.commodityDescribe;
                    this.administrator = params.row.user_id;
                    this.machineGroupIndex = params.row.initRowIndex;
                  }
                }
              }, '修改'),
              h('span', {}, ' '),
              h('Button', {
                props: {
                  type: 'warning',
                  size: 'small',
                  ghost: true,
                },
                on: {
                  click: () => {
                    this.deleteIndex = params.row.initRowIndex;
                    this.deleteVisible = true;
                  }
                },
              }, '删除')
            ]);
          }
        }
      ],
      userList: [],
      tableData: [],
      // 新增/修改商品类型
      title: '新增商品类型',
      visible: false,
      commodityType: '',
      commodityDescribe: '',
      administrator: '',
      machineGroupIndex: -1,
      // 删除
      deleteVisible: false,
      deleteIndex: 0,
    }
  },
  methods: {
    exportExcel() {
      this.$refs.tables.exportCsv({
        filename: `商品类型-${(new Date()).valueOf()}.csv`
      })
    },

    addCommodityType() {
      this.visible = true;
      this.commodityType = '';
      this.commodityDescribe = '';
      this.administrator = '';
      this.machineGroupIndex = -1;
    },

    async okModal() {
      // 新增
      if (this.machineGroupIndex < 0) {
        await rcRequest({
          method: 'post',
          url: '/producttypes/insert_product_types_info',
          data: {
            product_type: this.commodityType,
            description: this.commodityDescribe,
            user_id: this.administrator,
          },
        })
        this.getListData()
        this.$Message.success('新增成功')
        return;
      }

      // 修改
      await rcRequest({
        method: 'post',
        url: '/producttypes/update_product_types_info',
        data: {
          product_types_id: this.tableData[this.deleteIndex].id,
          product_type: this.commodityType,
          description: this.commodityDescribe,
          user_id: this.administrator,
        },
      })
      this.getListData()
      this.$Message.success('修改成功')
    },

    cancelModal() { },

    // 获取列表数据
    async getListData() {
      const { data: { data } } = await rcRequest({
        method: 'post',
        url: '/producttypes/select_product_types_list',
        data: { }
      })
      this.tableData = data.map(item => ({
        id: item.id,
        commodityType: item.product_type,
        commodityDescribe: item.description,
        administrator: item.user_name,
        updateTime: item.update_time,
        user_id: item.user_id,
      }))
    },

    // 获取用户信息
    async getUserListData() {
      const { data: { data } } = await rcRequest({
        method: 'post',
        url: '/user/select_user_list_of_agent_id',
        data: {
          agent_id: jsCookie.get('agent_id'),
        }
      })
      this.userList = data.map(item => ({
        value: item.id,
        label: item.user_name,
      }))
    },

    // 删除
    async handleDelete() {
      await rcRequest({
        method: 'post',
        url: '/producttypes/delete_product_types_info',
        data: {
          product_types_id: this.tableData[this.deleteIndex].id,
        },
      })
      this.tableData.splice(this.deleteIndex, 1)
      this.$Message.success('删除成功')
    },
  },
  mounted() {
    this.getListData()
    this.getUserListData()
  }
}
</script>

<style scoped>
.row {
  margin-top: 20px;
  display: flex;
  align-items: center;
}

.title {
  display: flex;
  justify-content: flex-end;
  padding-right: 20px;
}

.form {
  width: 85%;
}
</style>
